<template>
  <div class="content">
    <div class="post-top" v-loading="noticeLoading">
<!--      123456-->
      <template  v-if="noticeList.length>0">
        <div class="post" v-for="(item,index) in noticeList" :key="item.id" @click="skip(item.id)">
          <div class="post-top">
            <div class="post-top-item">
              <div class="post-title">
                {{ item.name }}
              </div>
              <div class="small-title">
                {{ item.valuation_text }}
              </div>
            </div>
            <div class="post-pay">{{ item.price }}
              <span>元/{{ item.unit_text }}</span>
            </div>
          </div>
          <div class="time">开工日期：{{ item.start_time }}</div>
          <div class="site">{{ item.address }}</div>
          <div class="striping"></div>
          <div class="recruiter">
            <!--          <img src="../../../public/static/Recruitment/defaultAvatar.jpg" alt="">-->
            <!--          <img :src="require('../../../public/static/Supermarket/'+ item.imgName +'.png')" alt="">-->
            <img :src="item.department_arr.logo" alt="">

            <div class="message">{{ item.department_arr.name }}</div>
          </div>
        </div>
      </template>
      <el-empty v-else class="not-available" style="position: absolute;left: 55%;top: 40%;transform: translate(-160px,50px)"></el-empty>
    </div>
  </div>
</template>

<script>
import {getWorkPublicList} from "@/api/supermarket";

export default {
  name: "shortJob",
  data(){
    return{
      noticeList:[],
      noticeLoading:false,
      page:1,limit:6
    }
  },
  methods:{
    skip(id){
      this.$router.push({ name: 'JobDetail',query:{id:id} })
    },
    getList() {
      this.noticeLoading = true
      getWorkPublicList({page:this.page,limit:this.limit,type:this.id}).then((res) => {
        this.noticeList = res.list;
      }).finally(()=>{
        this.noticeLoading = false
      })
    },
  },


  mounted() {
    this.utils.createParams(this,this.$route.query);
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-top: 15px;
  .post-top{
    width: 800px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .post{
      background-color: #fff;
      border-radius: 15px;
      margin:10px 10px;
      width: calc((100% - 45px) / 2);
      height: 270px;
      padding: 10px 20px;
      box-sizing: border-box;
      ::v-deep{
        .not-available{
          left:50px;
          top: 50px;
          margin-left: 50px;
        }
      }
      .post-top{
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .post-top-item{
          display: flex;
          .post-title{
            width: 90px;
            font-size: 20px;
            padding-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .small-title{
            text-align: center;
            box-sizing: border-box;
            width: 70px;
            height: 27px;
            font-size: 18px;
            color: #5795F3;
            margin: 5px 0 0 10px;
            padding-left: 3px;
            border-radius: 10px;
            border: 1px solid #5795F3;
          }
        }

        .post-pay{
          width: 150px;
          font-size: 20px;
          color: #5493F3;
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding-top: 7px;

          span{
            font-size: 20px;
            margin-left: -5px;
          }
        }
      }
      .striping{
        margin-top: 20px;
        width: 100%;
        height: 2px;
        background-color: #D8D8D8;
      }

      .time{
        font-size: 20px;
        margin-top: 20px;
        width: 220px;
        height: 26px;
        overflow: hidden;
      }
      .site{
        height: 52px;
        font-size: 20px;
        margin-top: 20px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
      .recruiter{
        display: flex;
        align-items: center;
        margin-top: 20px;
        img{
          width: 52px;
          height: 52px;
          border-radius: 30px;
          margin-right: 15px;
        }
        .message{

        }
      }
    }
  }
}
</style>
